<template>
  <div style="height: 100%">
    <el-card>
      <div class="coll_title">账号管理</div>
    </el-card>
    <el-card class="mag_t-20">
      <el-table :data="list" :border="true">
        <el-table-column type="selection" width="40" />
        <el-table-column prop="id" label="ID" width="50" />
        <el-table-column prop="username" label="账号" />
        <el-table-column prop="nickname" label="用户名" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column label="头像" max-width="120">
          <template #default="scope">
            <img :src="scope.row.user_pic"  style="width: 100px;height: 100px" alt="">
          </template>
        </el-table-column>
        <el-table-column label="权限" class="wz_jz">
        <template #default="scope">
          <el-tag type="warning">{{ getRootName(scope.row.root) }}</el-tag>
        </template>
        </el-table-column>
        <el-table-column prop="shop_id" label="店铺ID" />
        <el-table-column prop="text" label="账号状态">
          <template #default="scope">
            <el-tag :type="scope.row.text==='正常'?'success':'danger'">{{ scope.row.text }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="shop_name" label="店铺名称" />
        <el-table-column prop="address" label="地址" />
        <el-table-column label="操作" min-width="120">
          <template #default="scope">
            <el-button type="primary" @click="addData(scope.row,'预览')">查看</el-button>
            <el-button type="primary" @click="addData(scope.row,'编辑')">编辑</el-button>
            <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                icon-color="#626AEF"
                title="确定删除产品吗?"
                @confirm="deleteData(scope.row.id)"
            >
              <!--                @cancel="cancelEvent"-->
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog class="gd_1" v-model="visible" :show-close="false" :width="width">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <div class="wh_f">
            <div class="flex_1"><h4 :id="titleId" :class="titleClass">{{ title }}</h4></div>
            <div><el-button type="danger" @click="close">X</el-button></div>
          </div>
        </div>
      </template>
      <div>
        <div class="wh_f">
          <div class="flex_3">
            <titleText title="用户资料"></titleText>
            <div>
              <el-form :model="form" label-width="auto">
                <el-form-item label="账号 :">
                  <el-input :disabled="isLook" v-model="form.username" />
                </el-form-item>
                <el-form-item label="用户名 :">
                  <el-input :disabled="isLook" v-model="form.nickname" />
                </el-form-item>
                <el-form-item label="手机号 :">
                  <el-input :disabled="isLook" v-model="form.phone" />
                </el-form-item>
                <el-form-item label="头像 :">
                  <el-image
                      style="width: 100px; height: 100px"
                      :src="form.user_pic"
                      :zoom-rate="1.2"
                      :max-scale="7"
                      :min-scale="0.2"
                      :preview-src-list="[form.user_pic]"
                      :initial-index="4"
                      fit="cover"
                  />
                </el-form-item>
                <el-form-item label="权限 :">
                  <el-select
                      :disabled="isLook"
                      v-model="form.root"
                      placeholder="全部"
                      style="width: 240px"
                  >
                    <el-option
                        v-for="item in routePage"
                        :key="item.id"
                        :label="item.rootName"
                        :value="item.id"
                    />
                  </el-select>
<!--                  <el-button class="mag_l-20" @click="addRoot" type="primary">权限分配</el-button>-->
                </el-form-item>
                <el-form-item label="店铺ID :">
                  <el-input :disabled="isLook" v-model="form.shop_id" />
                </el-form-item>
                <el-form-item label="店铺名称 :">
                  <el-input :disabled="isLook" v-model="form.shop_name" />
                </el-form-item>
                <el-form-item label="店铺名称 :">
                  <el-input :disabled="isLook" v-model="form.address" />
                </el-form-item>
              </el-form>
              <div class="wz_rigdq">
                <el-button :disabled="isLook" @click="pushData" type="primary" size="large">确 定</el-button>
              </div>
            </div>
          </div>
<!--          <div class="flex_2" v-if="width=='1500px'">-->
<!--            <titleText title="权限分配"></titleText>-->
<!--&lt;!&ndash;            <p v-for="(item,index) in RouterRootlist">{{item}}</p>&ndash;&gt;-->
<!--            <div>-->
<!--              <el-cascader v-model="form.rootText" @change="handleChange"  :options="rootlist" :props="{ multiple: true }" clearable />-->
<!--            </div>-->
<!--          </div>-->
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {route, user} from "@/api";
import {ElMessage} from "element-plus";
let RouterRootlist:any = ref([])               //路由权限列表
let list = ref()               //列表
let rootlist = ref([])    //路由列表
let form = ref()               //弹窗表单
let visible = ref(false)  //弹窗开关
let title:any = ref()              //弹窗标题
let isLook = ref(false) //预览模式
let width = ref('1500px')
onMounted(()=>{
  setTimeout(()=>{
    getUserRoot_List()
  },1000)
  getUserList()
  getRoutePage_List()
})
// 分配权限
const addRoot = ()=>{
  if(width.value == "1000px"){
    width.value = "1500px"
  }else{
    width.value = "1000px"
  }
}
// 监听路由选择框
const handleChange = (e:any)=>{
  // 防止重复push 每一项处理前需要先清空
  RouterRootlist.value = []
  e.forEach((item:any)=>{
    let itemList= rootlist.value.find((option:any)=>option.id === item[0])
    //确定找到匹配的id
    if(itemList){
      let childrenList:any = itemList.children.find((child:any)=>child.id === item[1])
      RouterRootlist.value.push(childrenList)
    }
  })
}
// 查询列表
const getUserList = async ()=>{
  let res = await user.getUserInfoList({})
  // 使用 Array.prototype.splice() 来更新 list 内容
  list.value = res.data.data.data
}
// 绑定方法查询对应权限显示
const getRootName = (rootId:any)=>{
  if(routePage.value){
    console.log('权限列表',routePage.value,rootId)
    // @ts-ignore
    const root = routePage.value.find(item => item.id === rootId);
    return root ? root.rootName : '查询权限中...';
  }

}
// 页面数据
const routePage = ref()
// 查询权限列表
const getUserRoot_List = async ()=>{
  let res = await user.getUserRoot_List({})
  routePage.value = res.data.data.data
}
// 提交数据
const addData = (e:any,tit:String)=>{
  if(tit == '预览'){
    isLook.value = true
  }else{
    isLook.value = false
  }
  form.value = e
  if(typeof (e.rootText) == 'string'){
    form.value.rootText = JSON.parse(e.rootText)
  }
  visible.value = true
  title.value = tit
}
//获取一二级路由页面数据
const getRoutePage_List = async ()=>{
  let res = await route.getRoutePage_List({})
  rootlist.value = res.data.data
}
const deleteData = (e:any)=>{

}

const pushData = async()=>{
  if(title.value == '编辑'){
    form.value.rootText = JSON.stringify(form.value.rootText)
    let res = await user.updateUser_List(form.value)
    if(res.data.status==1){
      ElMessage({
        // @ts-ignore
        message: res.data.msg,
      type: res.data.status==1?'success':'error'
      })
    }
    visible.value = false
    getUserList()
  }
}
</script>
<style scoped>

</style>
